<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>气泡图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
    const data = [
      { time: '10:10', call: 4, waiting: 2, people: 2 },
      { time: '10:15', call: 2, waiting: 6, people: 3 },
      { time: '10:20', call: 13, waiting: 2, people: 5 },
      { time: '10:25', call: 9, waiting: 9, people: 1 },
      { time: '10:30', call: 5, waiting: 2, people: 3 },
      { time: '10:35', call: 8, waiting: 2, people: 1 },
      { time: '10:40', call: 13, waiting: 1, people: 2 }
    ];
    const chart = new F2.Chart({
      id: 'mountNode',
      width: window.innerWidth,
      height: window.innerWidth * 0.64,
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      call: {
        min: 0
      },
      people: {
        min: 0
      },
      waiting: {
        min: 0
      }
    });
    chart.legend({
      custom: true,
      position: 'bottom',
      items: [
        { value: 'waiting', marker: {symbol: 'square', fill: '#3182bd', radius: 5} },
        { value: 'call', marker: {symbol: 'circle', stroke: '#99d8c9', radius: 5, lineWidth: 3} },
        { value: 'people', marker: {symbol: 'circle', stroke: '#fdae6b', radius: 5, lineWidth: 3} }
      ]
    });
    chart.axis('waiting', false);
    chart.axis('call', false);
    chart.axis('people', false);
    chart.interval().position('time*waiting').color('#1890FF');
    chart.line().position('time*call').color('#223273').size(3).shape('smooth');
    chart.line().position('time*people').color('#FACC14').size(3).shape('smooth');
    chart.point().position('time*people').color('#FACC14').size(3);
    chart.render();
</script>
</body>
</html>
